import React from 'react'

// 类组件
/**
 * 2.使用class 类
 *- 使用 ES6 的 class 创建的组件，叫做类（class）组件
 *- 约定1：类名称也必须以大写字母开头
 *- 约定2：类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
 *- 约定3：类组件必须提供 render 方法
 *- 约定4：render 方法必须有返回值，表示该组件的 UI 结构
 */
// 2.组件 css 样式
import './index.css'
class ClassHello extends React.Component {
  // 3. js逻辑
  state = {
    abc: 456,
  }
  render() {
    // 返回jsx
    return (
      <div className="cla">
        <h1>我的第一个类组件{this.state.abc}</h1>
      </div>
    )
  }
}
/**
 *  js class 类
 * 1.class 构造函数语法糖
 */
// 父类
class Par {
  parFn2 = () => this
  parFn = () => {
    console.log('parfn')
  }
}
// 子类
class Text extends Par {
  constructor() {
    super()
    this.fn1 = () => {
      console.log('fn1')
    }
  }
  // 原型链上
  fn2() {
    console.log('fn2')
  }
  fn3 = () => {
    console.log('fn3')
  }
}
const text = new Text()
console.log(text)
export default ClassHello
